<template>
  <div class="header">
      <nav class="container navbar navbar-expand navbar-dark">
        <a class="navbar-brand" href="#">
          <i class="logo" href="#"></i>
        </a>
        <div class="collapse navbar-collapse justify-content-end">
          <ul class="navbar-nav">
            <li class="nav-item mx-3">
              <a class="nav-link active" href="#">在线商城</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">坚果Pro2</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">坚果Pro</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">Smartisan OS</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">欢喜云</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">应用下载</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">官方论坛</a>
            </li>
          </ul>
        </div>
        <span class="mx-3">|</span>
        <login-shop v-if="!top200" :shopping="shopping"></login-shop>
      </nav>
      <div :class="bgtoptwo">
        <nav class="navbar-two container navbar navbar-expand navbar-light position-relative">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item" @mouseenter="isHoverPhoneOver()" @mouseleave="isHoverPhoneOut()">
              <a class="nav-link" href="#">手机</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">“足迹”手感膜</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">官方配件</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">空气净化类</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">品牌周边</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">第三方商品</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">全部</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">服务</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">企业团购</a>
            </li>
          </ul>
          <login-shop v-if="top200" class="position-absolute" style="right: 15px" :shopping="shopping"></login-shop>
        </nav>
        <transition name="slide-down">
          <div v-show="isHoverPhone" class="phones-show w-100" @mouseenter="isHoverPhoneOver()" @mouseleave="isHoverPhoneOut()">
            <div class="container text-center border-top">
              <ul class="mx-auto row list-unstyled">
                <li class="col"></li>
                <li class="col-2">
                  <img src="" alt="">
                  <p>坚果 3</p>
                  <p class="monery"><span class="monery-mark">1,299.00</span><span> 起</span></p>
                </li>
                <li class="col-2">
                  <img src="" alt="">
                  <p>坚果 Pro 2</p>
                  <p class="monery"><span class="monery-mark">1,799.00</span><span> 起</span></p>
                </li>
                <li class="col-2">
                  <img src="" alt="">
                  <p>坚果 Pro</p>
                  <p class="monery"><span class="monery-mark">1,299.00</span><span> 起</span></p>
                </li>
                <li class="col"></li>
              </ul>
            </div>
          </div>
        </transition>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HNav',
  data () {
    return {
      bgtoptwo: 'bgWhite',
      top200: false,
      isHoverPhone: false
    }
  },
  methods: {
    watchScroll () {
      this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (this.scrollTop >= 85){
        this.top200 = true;
        this.bgtoptwo = 'bgWhiteLight'
      } else {
        this.top200 = false;
        this.bgtoptwo = 'bgWhite'
      }
    },
    isHoverPhoneOver () {
      this.isHoverPhone = true;
      this.bgtoptwo = 'bgWhiteLight isWhiteLightHover';
    },
    isHoverPhoneOut () {
      this.isHoverPhone = false;
      this.watchScroll();
    }
  },
  mounted (){
    window.addEventListener('scroll', this.watchScroll);
  },
  props: ['shopping', 'isHover'],
  components: {
    'login-shop': {
      template: `
        <ul class="nav text-secondary">
          <li class="nav-item">
            <a class="nav-link text-secondary" href=""><span class="fa fa-user"></span></a>
          </li>
          <li class="nav-item position-reltive">
            <a class="nav-link text-secondary shoppingButton" @mouseover="isHover = true" @mouseout="isHover = false">
              <span class="fa fa-shopping-cart"></span>
              <span class="badge badge-pill ml-1 badge-secondary" :class="{'badge-redpink':this.shopping.length>0}">{{this.shopping.length}}</span>
              <transition name="fade">
                <div class="card position-absolute text-center shopping-card" v-if="isHover" @mouseover="isHover = true" @mouseout="isHover = false">
                  <div v-show="!this.shopping.length">
                    <span class="fa fa-shopping-cart text-secondary" style="font-size: 5rem; padding-top: 5rem;"></span>
                    <p class="lead">这里空空的</p>
                    <small class="d-block" style="padding-bottom: 5rem;">您还没有选购任何商品，现在前往商城选购吧！</small>
                  </div>
                  <div v-show="this.shopping.length">
                    <div class="row shopping-item" v-for="(item, index) in this.shopping">
                      <div class="col-3 m-3">
                        <img class="shopping-item-img border rounded" :src="getForumImg(item.childForum, item.forum, item)">
                      </div>
                      <div class="col-6 mt-4 text-left">
                        <p class="m-0">{{item.name}}</p>
                        <p class="m-0">{{item.monery}}</p>
                        <p class="m-0">{{item.colors[index]}}</p>
                      </div>
                      <div class="col-2">
                        <span @click="close(index)" class="close-btn fa fa-close align-middle mt-5 border rounded-circle"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </transition>
            </a>
          </li>
        </ul>
      `,
      props: ['shopping', 'isHover'],
      data () {
        return {
          isHover: false
        }
      },
      methods: {
        getForumImg(childForum, forum, value, color, index) {
          return (
            !forum
            ? require(`../assets/${childForum}/${value.code}/${color || value.colors[0]}.${value.type[index] || value.type[0]}`)
            : require(`../assets/${childForum}/${forum}/${value.code}/${color ||　value.colors[0]}.${value.type[index] || value.type[0]}`)
          )
        },
        close(index){
          this.shopping.splice(index, 1)
        }
      }
    }
  }
}
</script>

<style scoped>
.header {
  background: #1a1a1a;
  background-image: linear-gradient(#000,#121212);
}
.logo {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: url('../assets/logo.png') no-repeat 50%;
  background-size: cover;
  background-position: 0 5px;
}
.tran,
.tran:after,
.tran:before {
  transition: all 0.3s;
}
.container {
  max-width: 1220px;
}
.bgWhite {
  background: #e7e7e7;
  border-bottom: 0;
  background-image: rgba(0,0,0,0);
  transition: all .3s;
}
.navbar-two li a:hover {
  color: #5079d9 !important;
  transition: all .3s;
}
.navbar-two li a::after {
  content: '·';
  padding-left: 10px;
  color: #aaa;
}
.navbar-two li:last-child a::after {
  content: '';
}
.navbar-two li.dropdown:hover + li a::after {
  color: #bbb !important;
  transition: all 0.3s;
}
@keyframes slide-down {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
.bgWhiteLight {
  position: fixed;
  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  background: #f7f7f7;
  border-bottom: 1px solid #dadada;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
  background-image: linear-gradient(#fff,#f1f1f1);
  animation: slide-down .3s;
  transition: all 0.5s;
}
.bgWhiteLight .nav-item a::after {
  color: #aaa !important;
}
.isWhiteLightHover {
  background: #e7e7e7 !important;
  transition: all 0.5s;
}
.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.5s;
}
.slide-down-enter, .slide-down-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
.phones-show {
  position: absolute;
  z-index: 1;
  background: #e7e7e7 !important;
}
.w-auto {
  width: auto !important;
}
.monery {
  color: #d44d44;
}
.monery-mark:before {
  content: "￥ ";
  color: #d44d44;
}
</style>
